<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<body>
    Everytime this window resizes this box will change size. Its width will be between 0 and the width of the window. It's height will be between 0 and 1000. The iframe will be resized so the contents always fit.

    <hr />

    <div id="box">
        <span id="dimensions"></span>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="../../src/pym.js" type="text/javascript"></script>
    <script>
        var resizeBox = function() {
            var $box = $('#box');
            var $dimensions = $('#dimensions');

            var boxHeight = Math.floor(Math.random() * 1000);
            var color = '#' + Math.floor(Math.random()*16777215).toString(16);

            $box.css({
                'width': '100%',
                'height': boxHeight + 'px',
                'background-color': color
            });

            $dimensions.text('100% x ' + boxHeight);
        }

        resizeBox();
        setInterval(resizeBox, 1000);
        var pymChild = new pym.Child({ polling: 1000 });
    </script>
</body>
</html>
